<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue监测数据原理总结</title>
    <!-- 引入 Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
      * {
        margin-top: 10px;
      }
    </style>
</head>
<body>
    <!--
        Vue 监视数据的原理：
            Vue 会监视 data 中所有层次的数据。

            如何监测对象中的数据？
                通过 setter 实现监视，且要在 new Vue 时就传入要监测的数据
                  对象中后追加的属性，Vue 默认不做响应式处理
                  如需给后添加的属性作响应式，请使用如下的 API:
                    Vue.set(target, propertyName/index, value) 或
                    this.$set(target, propertyName/index, value)
            
            如何监测数组中的数据？
                通过包裹数组更新元素的方法实现，本质就是做了两件事
                  调用原生对应的方法对数组进行更新
                  重新解析模板，进而更新页面

            在 Vue 修改数组中的某个元素一定要用如下方法：
                使用这些API:push(), pop(), shift(), unshift(), splice(), sort(), reverse()
                Vue.set() 或 vm.$set()
            
            特别注意：Vue.set() 和 vm.$set() 不能给 vm 或 vm 的根数据对象(例:data)添加属性!!!
    -->
    <!-- 准备一个容器 -->
    <div id="root">
        <h1>学生信息</h1>
        <button @click="student.age++">年龄加 1 岁</button> <br>
        <button @click="addSex">点我添加性别属性，默认值为男</button><br>  
        <button @click="addFriend">在列表首位添加一个朋友</button><br>
        <button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button><br>
        <button @click="addHobby">添加一个爱好</button><br>
        <button @click="updateFirstHobbyName">修改第一个爱好为：开车</button><br>
        
        <h2>学生姓名：{{student.name}}</h2>
        <h2 v-if="student.sex" >性别：{{student.sex}}</h2>
        <h2>学生年龄：{{student.age}}</h2>
        <h2>朋友们</h2>
        <ul>
          <li v-for="(f,index) in student.friends" :key="index">
            {{f.name}} -- {{f.age}}
          </li>
        </ul>
        <h2>爱好</h2>
        <ul> 
          <li v-for="(h,index) in student.hobbies" :key="index">
            {{h}}
          </li>
        </ul>
      </div>
</body>
<script type="text/javascript" >
    Vue.config.productionTip = false; // 组织 Vue 在启动时生成生产提示

    const vm = new Vue({
        el: '#root',
        data: {
          student:{
            name:'lc',
            age: 18,
            friends:[
              {name:'jack', age:28},
              {name:'curry', age:31}
            ],
            hobbies:['篮球','骑行','吃喝玩乐']
          }
        },
        methods: {
          addSex(){
            // Vue.set(this.student, 'sex', '男')
            this.$set(this.student, 'sex', '男')
          },
          addFriend(){
            this.student.friends.unshift({name:'hello', age:22})
          },
          updateFirstFriendName(){
            this.student.friends[0].name = '张三'
          },
          addHobby(){
            this.student.hobbies.push('学习')
          },
          updateFirstHobbyName(){
            // this.student.hobbies.splice(0, 1, '开车')
            // Vue.set(this.student.hobbies, 0 , '开车')
            this.$set(this.student.hobbies, 0 , '开车')
          }
        },
    })
</script>
</html>